<template>
	<view class="content">
	    <!-- 公共组件-每个页面必须引入 -->
	    <public-module></public-module>
		<u-sticky bgColor="#fff">
				<u-tabs :list="tabs" lineColor="#FF5E01" :activeStyle="{color: '#FF5E01'}" :current="current" @change="changeTab" ref="tab">
						
				</u-tabs>
		  </u-sticky>
		  <div class="con-list-div">
				<div class="sale-list-item arrangeGoods-item" v-for="(item,index) in list" :key="item.orderId">
				  <div class="sale-top" @click="toOrder(item)" style="cursor: pointer">
					<div class="sale-compeny" @click="toOrder(item)" style="cursor: pointer">{{item.storeName}}</div>
					<div class="sale-state">{{item.orderStateName}}</div>
				  </div>
				  <div class="sale-con" @click="toOrder(item)" style="cursor: pointer">
					 <div class="goods-top">
						 <div class="goods-name">{{item.inquiryTitle}}</div>
						 <div class="goods-price"><span class="label">￥</span>{{item.goodsPrice}}<span class="label">元/吨</span></div>
					 </div>
					 <div class="goods-middle">
						 <div class="goods-subtxt">发货地区：{{item.orderAddress}}</div>
						 <div class="goods-subtxt">
							 交易方式：{{item.orderShippingType}}
							 <span style="float:right">数量：{{item.goodsNum}}吨</span>
						 </div>
					 </div>
					
				  </div>
				  <div class="sale-bottom">
					<span>合计金额：
						<span style="color:#ff9d02;font-weight: bold">￥{{item.orderAmount}}</span>
						<span v-if="item.source == 'goodsId' && item.orderShippingType == '送到'"  style="font-size: 10px;">{{item.orderShippingFee !== '' ? '(含运费'+item.orderShippingFee+'元)' : '(不含运费)'}}</span>
					</span>
				  </div>
				  <div class="sale-btn">
						<!-- <u-button text="取消订单" size="small" shape="circle" :custom-style="style" v-if="item.orderState == 0 || item.orderState == 5" @click="showCancel(item)"></u-button> -->
						<span id="orderListBuySign" v-if=" item.orderState == 5">
							<u-button text="确认签约" size="small" shape="circle" type="primary" :custom-style="style" v-if=" item.orderState == 5"  @click="showDown(item)"></u-button>
						</span>
						<span id="orderListPay" v-if=" item.orderState == 20">
							<u-button text="上传汇款信息"  size="small" shape="circle" type="primary" :custom-style="style" v-if=" item.orderState == 20" @click="showPay(item)"></u-button>
						</span>
						<u-button text="查看物流" size="small" shape="circle" type="primary" :custom-style="style" v-if=" item.isDeliver == 1" @click="toLogisticsPage(item)"></u-button>
						<u-button text="服务评价" size="small" shape="circle" type="primary" :custom-style="style" v-if=" item.orderState >= 40  && item.isEvaluate == 0 "  @click="toEvaluateInfo(item,'add')"></u-button>
						<u-button text="查看评价" size="small" shape="circle" type="primary" :custom-style="style" v-if=" item.orderState >= 40 && item.isEvaluate == 1 "  @click="toEvaluateInfo(item,'see')"></u-button>
						<u-button text="确认收货" size="small" shape="circle" type="primary" :custom-style="style" v-if=" item.orderState == 40" @click="showTake(item)"></u-button>
						<u-button text="查看订单" size="small" shape="circle" :custom-style="style2" type="warning" @click="toOrder(item)"></u-button>
				  </div>
				</div>
		  </div>
		   
		  <div style="padding-bottom:40rpx;" >
			  <u-loadmore :status="status"></u-loadmore>
		  </div>
		  
		  <cancelOrder ref="cancelOrder" @refresh="searchList"></cancelOrder>
		  <payOrder ref="payOrder" @refresh="searchList"></payOrder>
		  <downloadImg ref="downloadImg" @refresh="searchList"></downloadImg>
		  
		  <u-modal :show="show" title="提示" content='确认收货后，订单完成!' showCancelButton @confirm="takeConfirm" @cancel="show=false"></u-modal>
		  
		  <driver-page ref="driverPage"></driver-page>
		
		
	</view>
</template>

<script>
	import {getOrderList,editOrder,getGuideDataAPI,pageSeo} from '@/config/api.js'
    import cancelOrder from '@/components/module/cancelOrder';
	import payOrder from '@/components/module/payOrder';
	import downloadImg from '@/components/module/downloadImg';
    import driverPage from '@/components/driver-page/driver-page';
	import store from '@/store';
	export default {
	    components:{
	       cancelOrder,payOrder,downloadImg,driverPage  
	    },
	    data() {
	        return {
				tabs: [
					{key:'all',name:'全部'},
					{key:'0',name:'待卖家签约'},
					{key:'5',name:'待买家签约'},
					{key:'20',name:'待付款'},
					{key:'30',name:'待发货'},
					{key:'40',name:'待收货'},
					
					{key:'60',name:'已完成'},
					{key:'10',name:'已取消'}],
				status: 'loadmore',
				list: [],
				pageNum: 0,
				pageSize:10,
				count:0,
				orderState:'all',
				current:0,
				style:{
					width:'160rpx',
					marginRight:'10rpx'
				},
				style2:{
					width:'160rpx',
					border:'none'
				},
				show:false,
				popOrderId:'',
				steps:[]
	        }
	    },
	    async onLoad(e) {
			await this.$onLaunched;
	        
			if(e.orderState){
				this.orderState = e.orderState
				if(e.orderState == 20){
					this.current = 3
				}else if(e.orderState == 30){
					this.current = 4
				}else if(e.orderState == 40){
					this.current = 5
				}else if(e.orderState == 60){
					this.current = 6
				}
			}else{
				this.current = 0
			}
	        
	    },
		async onShow() {
			this.clearData();
			this.getList().then(()=>{
				this.$nextTick(()=>{
					getGuideDataAPI({
						pageUrl:'orderList'
					}).then((res)=>{
						this.steps=res
						this.$refs.driverPage.showPop(this.steps)
					}).catch((error)=>{
						console.log(error)
					})
				})
			})
		// #ifdef H5
			pageSeo({pageType: 'indexPage'}).then((res)=>{
				document.title = res.pageTitle;
			})
		// #endif	
		},
		onReachBottom() {
			if(this.list.length >= this.count) {
				this.status = 'nomore';
				return ;
			}
			this.pageNum = ++ this.pageNum;
			this.getList()
		},
	    methods: {
			showTake(item){
				this.show = true;
				this.popOrderId = item.orderId
			},
			takeConfirm(){
				let data = {};
				data.orderId = this.popOrderId;
				data.operationType = 'buyerTake';
				editOrder(data).then(()=>{
					this.show = false;
					this.searchList();
					uni.showToast({
					  title: '确认收货完成！',
					  icon: 'none',
					  duration: 2000,
					});
				})
			},
			showDown(item){
				this.$refs.downloadImg.init(item)
			},
			showCancel(item){
				this.$refs.cancelOrder.init(item)
			},
			showPay(item){
				this.$refs.payOrder.init(item)
			},
			searchList(){
				this.clearData();
				this.getList()
			},
			
			changeTab(tab){
				console.log(tab)
				this.orderState = tab.key
				this.clearData()
				this.getList()
			},
			
			toOrder(item){
				uni.navigateTo({
				    url:'/pages/my/orderInfo?orderId='+item.orderId
				})
			},
			
			toEvaluateInfo(item,type){
				console.log(item)
				uni.navigateTo({
				    url:'/pagesUser/order/evaluateInfo?orderId='+item.orderId+'&type='+type
				})
			},
			
			//去物流页
			toLogisticsPage(item){
				uni.navigateTo({
				    url:'/pagesUser/order/logisticsInfo?orderId='+item.orderId
				})
			},
			
			//清除数据
			clearData(){
					this.pageNum = 1;
					this.list = [];
					this.status = 'loadmore';
					this.count = 0
			},
			getList(){
				let data = {};
				data.pageSize = 10;
				data.pageNum = this.pageNum;
				data.orderState = this.orderState;
				data.type = 'buyer';
				this.status = 'loading';
			return	getOrderList(data).then((res)=>{
					this.list = this.list.concat(res.list ? res.list : [] );
					this.count = res.count;
					if(this.list.length >= this.count) {
						this.status = 'nomore';
					}else{
						this.status = 'loadmore';
					}
				}).catch(()=>{
					this.status = 'loadmore';
				})
			},
	           
	        
	    },
	
	}
</script>

<style lang="scss">
@import '@/style/common.scss';
.con-list-div{
    padding:8px 12px;
	.sale-list-item{
		  cursor: pointer;
		  background: #fff;
		  margin-bottom:$marginSpace;
		  border-radius: 8px;
		  font-size:$m-font;
		  line-height: 24px;
		  padding:0 16px;
		  .sale-top{
			  padding-top:5px;
			  line-height:40px;
			  border-bottom:0.8px solid $border-color;
			  @include flexbox(space-between,center);
			  .sale-compeny{
				  @include textoverflow(1);
				  padding-right:16px;
			  }
			  .sale-state{
				  color:$u-primary;
			  }
		  }
		  .sale-con{
			 padding-top:5px; 
			.goods-top{
				@include flexbox(space-between,center);
				.goods-name{
					font-size:$m-font;
					padding-right:20px;
				}
				.goods-price{
					font-size:$m-font;
					font-weight:bold;
					white-space:nowrap;
					.label{
						font-size:10px
					}
				}
			}
			.goods-middle{
				.goods-subtxt{
					font-size:$s-font;
					color:$g-font-color;
				}
			}
		  }
		  .sale-bottom{
			line-height:40px;
			text-align: right;
			color:#888;
		  }
		  .sale-btn{
			padding:10px 0;
			text-align: right;
			border-top:0.8px solid $border-color;
			overflow: hidden;
			@include flexbox(flex-end,center);
		  }

		}
}

</style>